<template>
  <div class="dialog">
    <el-dialog
      :title="title"
      :visible.sync="visible"
      @opened="getVehicleModeById"
      :close-on-click-modal="false"
      width="75%"
      top="20vh"
      @closed="closeDialog"
    >
      <el-form
        :model="createForm"
        label-width="160px"
        label-suffix=":"
        class="searchw"
        ref="createForm"
      >
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="图片" prop="imgName" class="pictu">
               <el-upload class="upload-demo" ref="upload" action list-type="picture" :file-list="fileList"
                  :on-change="fileChange" :disabled="!isupload " accept="png,jpg"
                  :before-remove="beforeRemove">
                  <img v-if="createForm.imgName" :src="createForm.imgName" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="名称" prop="name">
              <el-input
                v-model.trim="createForm.name"
                placeholder="请输入配件名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="配件类型" prop="matAttrCodeb">
              <el-select
                v-model="createForm.matAttrCodeb"
                size="medium"
                placeholder="请选择"
                filterable
              >
                <el-option
                  v-for="item in classifyList"
                  :key="item.id"
                  :label="item.name + ' - ' + item.parentName"
                  :value="item.id"
                />
              </el-select>
              <!-- <el-input v-model.trim="createForm.matAttrCodeb" placeholder="请输入配件类型" ></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="品牌车系车型" prop="categoryId">
              <el-cascader
                v-model="brandss"
                :props="props"
                @change="getChange"
              ></el-cascader>
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="商品单位" prop="commodityUnit">
              <el-input
                v-model.trim="createForm.commodityUnit"
                placeholder="请输入商品单位"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="上限" prop="upLimit">
              <el-input-number
                v-model.trim="createForm.upLimit"
                :min="0"
                label="请输入上限"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下限" prop="downLimit">
              <el-input-number
                v-model.trim="createForm.downLimit"
                :min="0"
                label="请输入下限"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="规格" prop="standard">
              <el-input
                v-model.trim="createForm.standard"
                placeholder="请输入规格"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="型号" prop="model">
              <el-input
                v-model.trim="createForm.model"
                placeholder="请输入型号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="单位" prop="unit">
              <el-input
                v-model.trim="createForm.unit"
                placeholder="请输入单位"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="颜色" prop="color">
              <el-input
                v-model.trim="createForm.color"
                placeholder="请输入颜色"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="商品助记码" prop="simpName">
              <el-input
                v-model.trim="createForm.simpName"
                placeholder="请输入商品助记码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="拼音缩写" prop="pyName">
              <el-input
                v-model.trim="createForm.pyName"
                placeholder="请输入拼音缩写"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="基础重量" prop="weight">
              <el-input
                v-model.trim="createForm.weight"
                placeholder="请输入基础重量"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="制造商" prop="mfrs">
              <el-input
                v-model.trim="createForm.mfrs"
                placeholder="请输入制造商"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
         <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="多属性" prop="sku">
              <el-input
                v-model.trim="createForm.sku"
                placeholder="请输入多属性"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保质期天数" prop="expiryNum">
              <el-input-number
                v-model.trim="createForm.expiryNum"
                :min="0"
                label="请输入保质期天数"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="原厂OE号" prop="oeCode">
              <el-input
                v-model.trim="createForm.oeCode"
                placeholder="请输入原厂OE号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model.trim="createForm.remark"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <reg-sup-table ref="regSup" ></reg-sup-table>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">关 闭</el-button>
        <el-button type="primary" @click="confirmData()">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getCarLetterList,
  getCarBrandList,
  getCarList,
  getCarClassifyList,
  getMaterialById,
  uploadFile
} from '@/api/carLine'
import regSupTable from './regSupTable.vue'
export default {
  components: { regSupTable },
  name: 'addBrand',
  props: {
    row: {
      type: Object,
      default: {}
    },
    title: {
      type: String,
      default: ''
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileList: [],
      isupload: true,
      imgVisible: false, //上传图片弹框状态
      visible: true,
      brandss: '',
      classifyList: [],
      createForm: {
        id:"",
        name: '',
        initial: '',
        gatherTime: '',
        imgName:"",
        supplierCity:[]
      },
      supplierCity:[],
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level, data } = node
          setTimeout(() => {
            if (level == 0) {
              let data = {
                page: 1,
                size: 1000
              }
              getCarLetterList(data).then((res) => {
                const { code = undefined, data = {} } = res.data
                if (!code) {
                  const nodes = data.content.map((item) => ({
                    value: item.id,
                    label: item.name,
                    leaf: level >= 2
                  }))
                  resolve(nodes)
                } else {
                  this.$message.error(data)
                }
              })
            } else if (level == 1) {
              let param = {
                page: 1,
                size: 1000,
                letterId: data.value
              }
              getCarBrandList(param)
                .then((res) => {
                  const { code = undefined, data = {} } = res.data
                  if (!code) {
                    // this.brands = data.content;
                    const nodes = data.content.map((item) => ({
                      value: item.id,
                      label: item.name + ' - ' + item.makeName,
                      leaf: level >= 2
                    }))
                    resolve(nodes)
                  }
                })
                .catch(() => {
                  this.$message.error('服务器繁忙')
                })
            } else if (level == 2) {
              let param = {
                page: 1,
                size: 1000,
                brandId: data.value
              }
              getCarList(param)
                .then((res) => {
                  const { code = undefined, data = {} } = res.data
                  if (!code) {
                    // this.brands = data.content;
                    const nodes = data.content.map((item) => ({
                      value: item.id,
                      label: item.vehicleModel,
                      leaf: level >= 2
                    }))
                    resolve(nodes)
                  }
                })
                .catch(() => {
                  this.$message.error('服务器繁忙')
                })
            }
          }, 1000)
        }
      }
    }
  },
  created() {
    this.getTopParentList()
    if(this.row.id){
       this.row.matAttrCodeb = Number(this.row.matAttrCodeb)
      this.getVehicleModeById().then(() => {})
      this.getMaterialById()
    }
  },
  mounted() {},
  methods: {
    /**
     * 获取单个车型的全部数据 - 为重组品牌车系车型数据
     */
    getVehicleModeById() {
      let me = this
      return new Promise((resolve) => {
        let param = {
          page: 1,
          size: 10,
          id: this.createForm.categoryId
        }
        getCarList(param)
          .then((res) => {
            const { code = undefined, data = {} } = res.data
            if (!code) {
              let arr = data.content[0]
              this.brandss = [arr.letterId, arr.brandId, arr.id]
              resolve()
            }
          })
          .catch(() => {
            me.$message.error('服务器繁忙')
          })
      })
    },
    /**
     * 获取单个配件的全部数据
     */
    getMaterialById() {
      let data = {
        materialId: this.row.id
      }
      getMaterialById(data).then((res) => {
        const { code = undefined, data = {} } = res.data
          if (!code) {
            this.createForm = data;
            this.createForm.matAttrCodeb = Number(this.createForm.matAttrCodeb)
            this.$refs.regSup.initTableData(data.supplierCity)
          } else {
            this.$message.error('获取配件分类失败')
          }
      })
    },
    /**
     * 获取品牌车系车型点击后数据
     */
    getChange(val) {
      this.createForm.categoryId = val[2]
    },
    /**
     * 获取配件分类的树形数据
     */
    getTopParentList() {
      let param = {
        page: 1,
        size: 1000
      }
      getCarClassifyList(param)
        .then((res) => {
          const { code = undefined, data = {} } = res.data
          if (!code) {
            this.classifyList = data.content
          } else {
            this.$message.error('获取配件分类失败')
          }
        })
        .catch(() => {
          this.$message.error('服务器繁忙')
        })
    },
     /**
     *  上传头像
     */
    fileChange (file, fileList) {
      this.isupload = false;
      let data = new FormData();
      data.append("biz", 'material');
      data.append("file", fileList[0].raw);
        uploadFile(data)
          .then((res) => {
            if (res.data.code == 0) {
              this.createForm.imgName = res.data.data.remoteUrl;
              this.fileList = []
              this.isupload = true;
            } else {
              this.$openMessage(res.data.message, 'error');
              this.isupload = true;
            }
          })
          .catch((error) => {
            this.isupload = true;
          });
    },
    /**
     * 上传文件前
     */
    beforeRemove () {
      this.fileList = []
    },
    /**
     * 获取区域经销商表格数据
     */
    confirmData() {
      let arr =  this.$refs.regSup.getTableData();
      let list = []
      arr.map((item) => {
        let op = {
          cityId: item.cityId,
          supplierId: item.supplierId,
          purchasePrice: item.purchasePrice,
          retailPrice: item.retailPrice
        }
        list.push(op)
      })
      this.createForm.supplierCity = list
      this.$emit('ok', this.createForm)
    },
    /**
     * 关闭弹框
     */
    closeDialog() {
      this.$emit('cancle')
    }
  }
}
</script>
<style scoped lang="less">
 .pictu {
    ::v-deep .el-upload--picture {
      width: 100px !important;
      height: 100px !important;
      line-height: 100px !important;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }

    .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
  }
.el-select,.el-input-number,.el-cascader--medium {
  width: 100%!important;;
  .el-input{
    width: 100%!important;;
  }
}
</style>
